<template>
  <!-- 栏目修改 -->
  <div class="catemanager">
    <myheader title="频道管理" class="toback">
      <div slot="left">
        <span class="iconfont iconjiantou2 back" @click="$router.back()"></span>
        <span class="iconfont iconnew new"></span>
      </div>
      <span slot="right"></span>
    </myheader>
    <div class="mychannel">
      <h3>点击删除频道</h3>
      <div class="list">
        <span v-for="(v, i) in delarr" :key="i" @click="del(v, i)">
          {{ v.name }}
        </span>
        <span class="placeholder"></span>
        <span class="placeholder"></span>
      </div>
    </div>
    <div class="youchannel">
      <h3>点击添加频道</h3>
      <div class="list">
        <span v-for="(v, i) in addarr" :key="i" @click="add(v, i)">
          {{ v.name }}
        </span>
        <span @click="addname"><van-icon name="plus" /></span>
        <span class="placeholder"></span>
        <span class="placeholder"></span>
      </div>
    </div>
    <!-- 输入框 -->
    <!-- <van-dialog
      v-model="onoff"
      title="栏目名称添加"
      show-cancel-button
      @confirm="getcatename"
      @cancel="catename = ''"
    >  -->
    <van-dialog title="栏目名称添加" show-cancel-button v-model="onoff">
      <van-field label="栏目名称" required placeholder="请输入名称" />
    </van-dialog>
  </div>
</template>

<script>
import myheader from "@/components/hmheader.vue";
import { getlistname } from "@/apis/category.js";
export default {
  components: {
    myheader,
  },
  methods: {
    //删除
    del(v, i) {
      // console.log("删除");
      if (v.name == "关注" || v.name == "头条") {
        this.$toast.fail("该栏目不能进行删除");
      } else {
        //先进行添加在进行删除,并存到本地存储
        this.addarr.push(v);
        localStorage.setItem(
          "heima-headline-cate-add",
          JSON.stringify(this.addarr)
        );

        //进行删除
        this.delarr.splice(i, 1);
        localStorage.setItem(
          "heima-headline-cate-del",
          JSON.stringify(this.delarr)
        );
      }
    },
    //增加
    add(v, i) {
      // console.log("添加");
      //先添加后删除
      // this.delarr.unshift(v);  //添加到第一个
      this.delarr.push(v);
      localStorage.setItem(
        "heima-headline-cate-del",
        JSON.stringify(this.delarr)
      );
      this.addarr.splice(i, 1);
      localStorage.setItem(
        "heima-headline-cate-add",
        JSON.stringify(this.addarr)
      );
    },
    //显示添加框
    async addname() {
      console.log("添加栏目名");
      this.onoff = true;
    },
    //提交数据添加
    async getcatename() {},
  },
  async mounted() {
    this.delarr = JSON.parse(localStorage.getItem("heima-headline-cate-del"));
    if (!this.delarr) {
      let res = await getlistname();
      this.delarr = res.data.data;
    }
    // 被删除的栏目 没有被删除的时候添加了[],确保他就算是空也是空的数组,可以进行栏目的添加
    this.addarr =
      JSON.parse(localStorage.getItem("heima-headline-cate-add")) || [];
  },
  data() {
    return {
      addarr: [],
      delarr: [],
      onoff: false,
    };
  },
};
</script>

<style lang="less" scoped>
.catemanager {
  height: 650px;
  // background-color: #eee;
}
.toback {
  position: relative;
}
.back {
  position: absolute;
  top: 15px;
  left: 15px;
  display: inline-block;
}
.iconnew {
  margin-left: 20px;
  font-size: 50px;
  position: absolute;
  top: -2px;
  left: 15px;
}

.mychannel,
.youchannel {
  padding: 10px;
  h3 {
    line-height: 30px;
    font-weight: bold;
  }
  .list {
    padding: 10px;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    > span {
      margin-top: 10px;
      display: inline-block;
      width: 20%;
      border: 1px solid #ccc;
      text-align: center;
      line-height: 40px;
      border-radius: 8px;
    }
    .placeholder {
      height: 0;
      width: 20%;
      border: 0;
    }
  }
}
</style>